<template>
    <div class="box_index">
        <div class="mind">
            <h3>——&nbsp;还没逛够&nbsp;——</h3>
        </div>
        <div class="shopping">
            <img src="../../../assets/img/Home/df2d513f8a100528.jpg" alt="">
            <p>榻榻米床垫可折叠单双人印花加厚床垫学生宿舍单人0.9m 印花加厚-巴洛克 1.2*2.0米</p>
            <div class="shopping_price"><span><i>￥</i>269.00</span></div>
            <div class="shopping_discount">满减</div>
            <div class="shopping_hd">
                <div class="shopping_enable"><span>找相似</span></div>
                <div class="shopping_del"><span>不喜欢</span></div>
            </div>  
        </div>
        <div class="shopping">
            <img src="../../../assets/img/Home/df2d513f8a100528.jpg" alt="">
            <p>榻榻米床垫可折叠单双人印花加厚床垫学生宿舍单人0.9m 印花加厚-巴洛克 1.2*2.0米</p>
            <div class="shopping_price"><span><i>￥</i>269.00</span></div>
            <div class="shopping_discount">满减</div>
            <div class="shopping_hd">
                <div class="shopping_enable"><span>找相似</span></div>
                <div class="shopping_del"><span>不喜欢</span></div>
            </div>  
        </div>
        <div class="shopping">
            <img src="../../../assets/img/Home/df2d513f8a100528.jpg" alt="">
            <p>榻榻米床垫可折叠单双人印花加厚床垫学生宿舍单人0.9m 印花加厚-巴洛克 1.2*2.0米</p>
            <div class="shopping_price"><span><i>￥</i>269.00</span></div>
            <div class="shopping_discount">满减</div>
            <div class="shopping_hd">
                <div class="shopping_enable"><span>找相似</span></div>
                <div class="shopping_del"><span>不喜欢</span></div>
            </div>  
        </div>
        <div class="shopping">
            <img src="../../../assets/img/Home/df2d513f8a100528.jpg" alt="">
            <p>榻榻米床垫可折叠单双人印花加厚床垫学生宿舍单人0.9m 印花加厚-巴洛克 1.2*2.0米</p>
            <div class="shopping_price"><span><i>￥</i>269.00</span></div>
            <div class="shopping_discount">满减</div>
            <div class="shopping_hd">
                <div class="shopping_enable"><span>找相似</span></div>
                <div class="shopping_del"><span>不喜欢</span></div>
            </div>  
        </div>
        <div class="shoppings">
            <img src="../../../assets/img/Home/df2d513f8a100528.jpg" alt="">
            <p>榻榻米床垫可折叠单双人印花加厚床垫学生宿舍单人0.9m 印花加厚-巴洛克 1.2*2.0米</p>
            <div class="shopping_price"><span><i>￥</i>269.00</span></div>
            <div class="shopping_discount">满减</div>
            <div class="shopping_hd">
                <div class="shopping_enable"><span>找相似</span></div>
                <div class="shopping_del"><span>不喜欢</span></div>
            </div>  
        </div>
        <div class="shopping">
            <img src="../../../assets/img/Home/df2d513f8a100528.jpg" alt="">
            <p>榻榻米床垫可折叠单双人印花加厚床垫学生宿舍单人0.9m 印花加厚-巴洛克 1.2*2.0米</p>
            <div class="shopping_price"><span><i>￥</i>269.00</span></div>
            <div class="shopping_discount">满减</div>
            <div class="shopping_hd">
                <div class="shopping_enable"><span>找相似</span></div>
                <div class="shopping_del"><span>不喜欢</span></div>
            </div>  
        </div>
        <div class="shopping">
            <img src="../../../assets/img/Home/df2d513f8a100528.jpg" alt="">
            <p>榻榻米床垫可折叠单双人印花加厚床垫学生宿舍单人0.9m 印花加厚-巴洛克 1.2*2.0米</p>
            <div class="shopping_price"><span><i>￥</i>269.00</span></div>
            <div class="shopping_discount">满减</div>
            <div class="shopping_hd">
                <div class="shopping_enable"><span>找相似</span></div>
                <div class="shopping_del"><span>不喜欢</span></div>
            </div>  
        </div>
        <div class="shopping">
            <img src="../../../assets/img/Home/df2d513f8a100528.jpg" alt="">
            <p>榻榻米床垫可折叠单双人印花加厚床垫学生宿舍单人0.9m 印花加厚-巴洛克 1.2*2.0米</p>
            <div class="shopping_price"><span><i>￥</i>269.00</span></div>
            <div class="shopping_discount">满减</div>
            <div class="shopping_hd">
                <div class="shopping_enable"><span>找相似</span></div>
                <div class="shopping_del"><span>不喜欢</span></div>
            </div>  
        </div>
        <div class="shopping">
            <img src="../../../assets/img/Home/df2d513f8a100528.jpg" alt="">
            <p>榻榻米床垫可折叠单双人印花加厚床垫学生宿舍单人0.9m 印花加厚-巴洛克 1.2*2.0米</p>
            <div class="shopping_price"><span><i>￥</i>269.00</span></div>
            <div class="shopping_discount">满减</div>
            <div class="shopping_hd">
                <div class="shopping_enable"><span>找相似</span></div>
                <div class="shopping_del"><span>不喜欢</span></div>
            </div>  
        </div>
        <div class="shoppings">
            <img src="../../../assets/img/Home/df2d513f8a100528.jpg" alt="">
            <p>榻榻米床垫可折叠单双人印花加厚床垫学生宿舍单人0.9m 印花加厚-巴洛克 1.2*2.0米</p>
            <div class="shopping_price"><span><i>￥</i>269.00</span></div>
            <div class="shopping_discount">满减</div>
            <div class="shopping_hd">
                <div class="shopping_enable"><span>找相似</span></div>
                <div class="shopping_del"><span>不喜欢</span></div>
            </div>  
        </div>
        
    </div>
</template>
<style>
.shopping{
    margin-right: 12.5px;
    margin-bottom: 20px;
}
.shopping,.shoppings{
    width: 230px;
    height: 315px;
    background-color: #fff;  
    float: left;
    position: relative;
    cursor: pointer;
    margin-bottom: 12.5px;
}
.shopping img ,.shoppings img{
    margin: 40px 0 18px;
}
.shopping p,.shoppings p{
    font-size: 12px;
    color: #7d7d7d;
    height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 20px;
}
.shopping_price{
    float: left;
    margin-right: 10px;
}
.shopping_price span {
    color: #e33333;
    text-align: left;
}
.shopping_price span i{
    margin-right: 3px;
    font-style: initial;
    margin-left: 20px;
}
.shopping_discount{
    font-size: 12px;
    color: #e33333;
    height: 16px;
    line-height: 16px;
    width: 50px;
    border: 1px solid #e33333;
    float: left;
}
.shopping_hd{
    display: none;
    position: absolute;
    left: 30px;
    bottom: 0;
    height: 66px;
    width: 100%;
}
.shopping:hover .shopping_hd{
    display: block;
}
.shoppings:hover .shopping_hd{
    display: block;
}
.shopping:hover .shopping_discount,.shopping:hover .shopping_price{
    display: none;
}
.shoppings:hover .shopping_discount,.shoppings:hover .shopping_price{
    display: none;
}
.shopping_enable,.shopping_del{
    height: 28px;
    line-height: 28px;
    width: 70px;
    font-size: 12px;
    border: 1px solid #353131;
    border-radius: 15px;
    color: #fff;
    float: left;
}
.shopping_enable{
    background-color: #353131;
}
.shopping_del{
    color: #353131;
    margin-left: 25px;
}
</style>

        